<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hello bootstrap</title>
    <!--导入bootstrap的主样式-->
    <link rel="stylesheet" href="component/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css">

</head>
<body>
<div class="container">
    <h1>Hello,BootStrap</h1>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">点我试试</button>
</div>

<!-- 定义模态框 -->
<div class="modal fade"  id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>

            <div class="modal-body">
                <h2>产品列表</h2>
                <table class="table table-bordered table-hover">
                    <tr>
                        <th>表头1</th>
                        <th>表头2</th>
                        <th>表头3</th>
                        <th>表头4</th>
                    </tr>
                    <tr>
                        <td>单元格1</td>
                        <td>单元格2</td>
                        <td>单元格3</td>
                        <td>单元格4</td>
                    </tr>
                    <tr>
                        <td>单元格1</td>
                        <td>单元格2</td>
                        <td>单元格3</td>
                        <td>单元格4</td>
                    </tr>
                    <tr>
                        <td>单元格1</td>
                        <td>单元格2</td>
                        <td>单元格3</td>
                        <td>单元格4</td>
                    </tr>
                    <tr>
                        <td>单元格1</td>
                        <td>单元格2</td>
                        <td>单元格3</td>
                        <td>单元格4</td>
                    </tr>
                </table>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 导入js文件 -->
<script type="text/javascript" src="component/jquery/jquery.min.js"></script>
<script type="text/javascript" src="component/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>